// 薪资组件
<template>
  <div class="salary">
    <el-date-picker
      v-model="monthValue"
      type="month"
      placeholder="选择账期"
      format="yyyyMM"
      value-format="yyyyMM"
      @change="monthChange()"
      class="monthBar"
    >
    </el-date-picker>
    <div class="dailyLeft">
      <p class="title">薪资</p>

      <div id="echartsBing" class="echartsBing"></div>
    </div>
    <div class="dailyRight">
      <p>基本薪资：{{ salaryList.base_salary }}</p>
      <p>补贴：{{ salaryList.allowance }}</p>
      <p>扣除：{{ salaryList.deduction }}</p>
      <p>总结：{{ salaryList.total_salary }}</p>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      bing: null,
      salaryList: {
        base_salary: "",
        allowance: "",
        deduction: "",
        total_salary: "",
      },
      monthValue: null,
      echartsData: [],
    };
  },
  mounted() {
    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth();
    if (month < 10) {
      month = "0" + month;
    } else {
      month;
    }
    this.monthValue = year + month;
    this.getSalary();
  },
  methods: {
    monthChange() {
      this.getSalary();
    },
    getSalary() {
      this.echartsData = [];
      this.$http({
        url: this.$http.adornUrl("/business/esalary/query"),
        method: "get",
        params: this.$http.adornParams({
          monthId: this.monthValue,
          userId: localStorage.getItem("userId"),
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (data.page.records.length == 0) {
            this.$message({
              message: "当前账期下无薪资记录",
              type: "error",
              duration: 1000,
            });
          } else {
            this.salaryList = data.page.records[0];
            this.echartsData.push({
              name: "基本薪资",
              value: this.salaryList.base_salary,
            });
            this.echartsData.push({
              name: "补贴",
              value: this.salaryList.allowance,
            });
            this.echartsData.push({
              name: "扣除",
              value: this.salaryList.deduction,
            });
            this.initEcharts();
          }
        }
      });
    },
    initEcharts() {
      let option = (option = {
        title: {
          text: "薪资饼状图",
          subtext: this.monthValue,
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["基本薪资", "补贴", "扣除"],
        },
        series: [
          {
            name: "薪资统计",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.echartsData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      this.$nextTick(() => {
        this.bing = echarts.init(document.getElementById("echartsBing"));
        this.bing.setOption(option);
      });
    },
  },
};
</script>

<style lang="scss">
.salary {
  width: 1000px;
  overflow: hidden;
  height: 500px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 #d3dce6;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
  border-radius: 5px;
  position: relative;
  .monthBar {
    position: absolute;
    top: 15px;
    left: 150px;
  }
  .dailyLeft {
    width: 490px;
    height: 100%;
    .title {
      margin-left: 20px;
      font-size: 20px;
      font-weight: 600;
    }
    .echartsBing {
      width: 400px;
      height: 400px;
      margin-left: 20px;
    }
  }
  .dailyRight {
    width: 490px;
  }
}
</style>
